<template>
  <el-dialog v-model="dialogVisible" title="发货信息" width="376px" :before-close="handleDialogClose">
    <div class="dialog-form pad-r-22 mar-t--6 mar-b--20">
      <div class="flex v-align-c pad-b-20">
        <span class="le-label">发 货 人：</span>
        <div class="flex-item">
          <el-input v-model="receive.name" placeholder="请输入" />
        </div>
      </div>
      <div class="flex v-align-c pad-b-20">
        <span class="le-label">手机号码：</span>
        <div class="flex-item">
          <el-input v-model="receive.phone" placeholder="请输入" maxlength="11" @blur="checkInput('phone')" />
          <span style="color: red;" v-if="receive.phoneErrorMsg">{{receive.phoneErrorMsg}}</span>
        </div>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button class="dialog-close" @click="handleDialogClose">取消</el-button>
        <el-button type="primary" class="dialog-sure" @click="handleDialogSure">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
  import {
    defineComponent,
    ref,
    onMounted
  } from 'vue'
  export default defineComponent({
    name: 'DialogDeliver',
    props: {
      onSureCall: Function
    },
    setup(props) {
      const dialogVisible = ref( < boolean > false)
      const receive = ref( < object > {
        name: '',
        phone: '',
        phoneErrorMsg: ''
      })
      onMounted(() => {

      })

      const handleDialogSure = () => {
        if (!checkInput('phone')) {
          return
        }
        dialogVisible.value = false
        props.onSureCall(receive.value)
      }
      const handleDialogClose = () => {
        dialogVisible.value = false
      }
      const handleDialogOpen = (senderName: string, senderPhone: string) => {
        receive.value.name = senderName
        receive.value.phone = senderPhone
        receive.value.phoneErrorMsg = ''
        dialogVisible.value = true
      }

      // 验证
      const checkInput = (inputName: string) => {
        if (inputName === 'phone') {
          if (receive.value.phone) {
            if (!$validUtils.isValidatePhone(receive.value.phone)) {
              receive.value.phoneErrorMsg = '请填写正确的手机号码!'
              return false
            } else {
              receive.value.phoneErrorMsg = ''
            }
          }
        }
        return true
      }

      return {
        dialogVisible,
        handleDialogSure,
        handleDialogClose,
        handleDialogOpen,
        receive,
        checkInput
      }
    }
  })
</script>

<style lang="scss" scoped>
  $darkBlue: #182245;
  $detailWidth: 100%;
  $recommendGoodsWidth: 190px;

  .dialog-form {
    .le-label {
      width: 95px;
      text-align: right;
      color: #333;
    }

    ::-webkit-input-placeholder {
      color: #999999;
    }

    ::-moz-placeholder {
      color: #999999;
    }
  }
</style>
